<template>
    <div id="app">
        <c-header :need-back="needBack" :title="title"></c-header>
        <transition  >
            <router-view style="margin-top: 30px"></router-view>
        </transition>
    </div>
</template>

<script setup>
import CHeader from "./components/title";

</script>
<script>
    export default {
        data(){
            return{
                title:"收银系统",
                needBack:false
            }
        },
        watch: { // 监听，当路由发生变化的时候执行
            $route(to){
                this.needBack = to.path !== "/" && to.path !== "/login";
                this.title = to.meta.title;
            },
        },
    }
</script>

<style lang="scss">
    html{
        height: 100%;
    }
    body{
        height: calc( 100% - 30px );
    }
    #app{
        height:100%;
    }

    .matable{
        background: #FFFFFF; width: 100%;
        border-collapse:collapse;
        tr:first-child{
            background: #2c3e50;color: #FFFFFF;
        }
        tr{
            border-bottom: 1px solid #f3f3f3;
            td{
                padding: 10px; text-align: center;
                border-right: 1px solid #f3f3f3;
            }
        }
    }

    .hand {
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .op {
        transform: scale(1);
        transition: all .2s
    }

    .op:active {
        transition: all .1s;
        opacity: .6
    }

    *:focus{
        outline: 5px solid green !important;
    }

    .sc:active {
        transform: scale(.97)
    }
</style>
